<template>
  <div class="home-con">
    <el-row>
      <el-col
        :span="8"
        v-for="item in dingdanArr"
        :key="item.id"
        class="dingdan"
      >
        <!--  在vue的项目中 获取的是本地图片地址，并且使用变量获取时，需要使用 require -->
        <div><img :src="item.img" class="tp" /></div>
        <div>
          <div>{{ item.name }}</div>
          <div>{{ item.price }}</div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="diachul">
      <div class="toubu">待处理事务</div>
      <el-col
        :span="6"
        v-for="item in daichuliArr"
        :key="item.id"
        class="toubu1"
      >
        <div>
          <div>
            {{ item.name }} <span>({{ item.num }})</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="muem">
      <div class="left">
        <div class="weibu">商品总览</div>
        <ul v-for="item in shangpinArr" :key="item.id" class="Oul">
          <li class="Oli">
            <div class="ziti">{{ item.num }}</div>
            <div>{{ item.name }}</div>
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="weibu">用户总览</div>
        <ul v-for="item in yonghuArr" :key="item.id" class="Oul">
          <li class="Oli">
            <div class="ziti">{{ item.num }}</div>
            <div>{{ item.name }}</div>
          </li>
        </ul>
      </div>
    </div>

    <div class="muem1">
      <div class="diandna">订单统计</div>
      <div class="wleft">
        <ul v-for="item in tongjiArr" :key="item.id" class="iUK">
          <li>{{ item.name }}</li>
          <li>{{ item.num }}</li>
          <li>{{ item.type }}{{ item.dec }}</li>
        </ul>
      </div>
      <div id="mychart" class="mychart"></div>
    </div>

    <div id="piechart" class="mychart"></div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      dingdanArr: [
        {
          id: 1,
          name: "今日订单总数",
          price: "200",
          img: require("@/assets/images/home_order.png"),
        },
        {
          id: 2,
          name: "今日销售总额",
          price: "￥5000",
          img: require("@/assets/images/home_today_amount.png"),
        },
        {
          id: 3,
          name: "昨日订单总数",
          price: "￥3000",
          img: require("@/assets/images/home_yesterday_amount.png"),
        },
      ],
      //待处理事务
      daichuliArr: [
        { id: 1, name: "代付款订单", num: 10 },
        { id: 2, name: "已完成订单", num: 5 },
        { id: 3, name: "待确认收货订单", num: 20 },
        { id: 4, name: "代发货订单", num: 30 },
        { id: 5, name: "新缺货登记", num: 6 },
        { id: 6, name: "待处理退款申请", num: 8 },
        { id: 7, name: "已发货订单", num: 12 },
        { id: 8, name: "待处理退货订单", num: 9 },
        { id: 9, name: "广告位即将到期", num: 10 },
      ],
      //商品总览
      shangpinArr: [
        { id: 1, name: "已下架", num: 100 },
        { id: 2, name: "已上架", num: 400 },
        { id: 3, name: "库存紧张", num: 50 },
        { id: 4, name: "全部商品", num: 500 },
      ],
      //用户总览
      yonghuArr: [
        { id: 1, name: "今日新增", num: 100 },
        { id: 2, name: "昨日新增", num: 200 },
        { id: 3, name: "本月新增", num: 1000 },
        { id: 4, name: "会员总数", num: 5000 },
      ],
      //订单统计
      tongjiArr: [
        {
          id: 1,
          name: "本月订单统计",
          num: 1000,
          type: "10%",
          dec: "同比上月",
        },
        {
          id: 2,
          name: "本周订单总数",
          num: 1000,
          type: "-10%",
          dec: "同比上周",
        },
        {
          id: 3,
          name: "本月销售总额",
          num: 100000,
          type: "10%",
          dec: "同比上月",
        },
        { id: 4, name: "本月销售", num: 50000, type: "-10%", dec: "同比上周" },
      ],

      option: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [400, 200, 150, 80, 70, 110, 200],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 0, 0.2)",
            },
            color: "blue",
          },
        ],
      },
      pieEcharts: {
        title: {
          text: "商品总览",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              //填充后台收据
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    console.log(this.$echarts);
    this.lineEcharts();
    this.pmsEcharts();
  },
  methods: {
    lineEcharts: function () {
      //初始化 图表
      let mychart = this.$echarts.init(document.getElementById("mychart"));
      console.log(mychart);
      //画图
      mychart.setOption(this.option);
    },
    pmsEcharts: function () {
      let mychart = this.$echarts.init(document.getElementById("piechart"));
      console.log(mychart);
      //重组后台数据
      var data = [];
      this.shangpinArr.forEach((item) => {
        data.push({ value: item.num, name: item.name });
      });
      this.pieEcharts.series[0].data = data;

      //画图
      mychart.setOption(this.pieEcharts);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.home-con {
  padding: 10px;
}
.tp {
  width: 100%;
  height: 100%;
}
.dingdan {
  border: 1px solid #ccc;
  margin: 10px;
  padding: 15px;
  width: 30%;
  height: 6.375rem;
  display: flex;
  justify-content: space-around;
  border-radius: 10px;
}
span {
  float: right;
  color: red;
}
.diachul {
  border: 1px solid #eee7e3;
  height: auto;
}
.toubu {
  text-indent: 1em;
  height: 30px;
  background: #fcf6f2;
  line-height: 30px;
  width: 100%;
}
.toubu1 {
  margin-left: 30px;
  border-bottom: 1px solid #ccc;
  width: 310px;
  height: 50px;
  padding-top: 10px;
  margin-bottom: 10px;
  line-height: 30px;
  overflow: hidden;
}
.mychart {
  height: 250px;
  width: 60%;
  float: left;
}
.weibu {
  text-indent: 1em;
  height: 30px;
  background: #fcf6f2;
  line-height: 30px;
}
.muem {
  margin-top: 10px;
  margin-left: -10px;
  display: flex;
  width: 102%;
  justify-content: space-between;
}
.muem1 {
  margin-top: 10px;
  margin-left: -10px;
  border: 1px solid #ccc;
  height: 268px;
  width: 102%;
}
.left {
  width: 49%;
  border: 1px solid #eee7e3;
}
.right {
  width: 49%;
  border: 1px solid #eee7e3;
}
.Oul {
  list-style: none;
}
.Oli {
  float: left;
  width: 25%;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.ziti {
  color: red;
}

.wleft {
  width: 20%;
  border-right: 1px solid #ccc;
  float: left;
  text-align: center;
}

.diandna {
  text-indent: 1em;
  height: 30px;
  background: #fcf6f2;
  line-height: 30px;
  width: 100%;
}
.iUK {
  list-style: none;
}
</style>